<template>
  <div class="page">
    <!-- 按钮切换部分 -->
    <div class="s-btn">
      <el-button type="primary" size="small" plain>倾角4（桥台）</el-button>
      <el-button type="primary" size="small" plain>倾角4（桥台）</el-button>
      <el-button type="primary" size="small" plain>倾角4（桥台）</el-button>
      <el-button type="primary" size="small" plain>倾角4（桥台）</el-button>
    </div>
    <!-- 基本信息 -->
    <div class="s-detail-box">
      <el-collapse v-model="activeNames">
        <el-collapse-item title="基本信息" name="1">
          <div class="scroll-box">
            <el-row :gutter="10">
              <el-col :span="8">
                <el-row :gutter="10">
                  <el-col :span="12">
                    <el-card shadow="hover">
                      <ul>
                        <li><span>名称：</span><span>大湾子大桥YK36+850～YK36+950填方路基及桥台</span></li>
                        <li><span>边坡高度：</span><span></span></li>
                        <li><span>起点桩号：</span><span></span></li>
                        <li><span>经度：</span><span></span></li>
                        <li><span>产状：</span><span></span></li>
                        <li><span>物质组成：</span><span></span></li>
                      </ul>
                    </el-card>
                  </el-col>
                  <el-col :span="12">
                    <el-card shadow="hover">
                      <ul>
                        <li><span>边坡位置：</span><span></span></li>
                        <li><span>边坡长度：</span><span></span></li>
                        <li><span>终点桩号：</span><span></span></li>
                        <li><span>纬度：</span><span></span></li>
                        <li><span>开挖坡向：</span><span></span></li>
                        <li><span>边坡倾向：</span><span></span></li>
                      </ul>
                    </el-card>
                  </el-col>
                </el-row>
              </el-col>
              <!-- 图片部分 -->
              <el-col :span="16">
                <div class="s-pic">
                  <el-row>
                    <el-col :span="6" v-for="(o, index) in 3" :key="o">
                      <el-card :body-style="{ padding: '0px' }">
                        <el-image class="image" :src="url" :preview-src-list="srcList">
                        </el-image>
                        <div class="pic-bottom">
                          <span>{{index}}好吃的汉堡</span>
                        </div>
                      </el-card>
                    </el-col>
                  </el-row>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <el-row :gutter="10">
      <!-- table -->
      <el-col :span="11">
        <div class="grid-content page_main">
          <div class="page-time">
            <el-date-picker size="small" class="s-time" v-model="startTime" type="datetime" placeholder="选择开始日期">
            </el-date-picker>
            <el-date-picker size="small" class="s-time" v-model="endTime" type="datetime" placeholder="选择终止日期">
            </el-date-picker>
            <el-button size="small" class="common_btn-defalut" icon="el-icon-search" @click="form.page=1;queryList()">搜索</el-button>
          </div>
          <!-- table -->
          <el-table :data="tableList" border @selection-change="handleSelectionChange" ref="multipleTable"
            tooltip-effect="dark">
            <el-table-column fixed type="selection" width="55">
            </el-table-column>
            <el-table-column prop="createTime" label="数据采集时间" width="160">
              <template slot-scope="scope">
                {{scope.row.createTime|formatTimer()}}
              </template>
            </el-table-column>
            <el-table-column prop="holePosition" label="XY合成方向偏移角度(°)" width="180">
            </el-table-column>
            <el-table-column prop="operator" label="XY变化速率(°/min)" width="160">
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="80">
              <template slot-scope="scope">
                <el-popconfirm confirmButtonText='好的' cancelButtonText='不用了' icon="" title="确定删除该信息吗？" @confirm="handleDelete(scope.row)">
                  <button slot="reference" class="btn_delete">删除</button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页器 -->
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="form.page"
            :page-size="form.pageSize"    :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
              layout="sizes, prev, pager, next"  :total="total">
          </el-pagination>
        </div>
      </el-col>
      <!-- 绘图部分 -->
      <el-col :span="13">
        <div id="line1" class="line-box"></div>
        <div id="line2" class="line-box"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Format from '@/utils/format'
export default {
  data () {
    return {
      form: {
        page: 1,
        pageSize: 10
      },
      total: 0,
      startTime: '',
      endTime: '',
      tableList: [],
      activeNames: ['1'],
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      srcList: [
        'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
      ]
    }
  },
  filters: {
    // 时间格式化
    formatTimer (timer) {
      return Format(new Date(timer))
    },
  },
  methods: {
    // 分页大小改变
    handleSizeChange (val) {
      this.form.pageSize = val
      this.queryList()
    },

    // 当前页码改变
    handleCurrentChange (val) {
      this.form.page = val
      this.queryList()
    },
    handleSelectionChange (val) {},
    // 删除
    handleDelete (val) {

    },
    async queryList () {},
    // 倾角曲线图
    getLine1 (id) {
      var echarts = require('echarts')
      var base = +new Date(1968, 9, 3)
      var oneDay = 24 * 3600 * 1000
      var date = []

      var data = [Math.random() * 300]
      var data1 = [Math.random() * 300]
      for (var i = 1; i < 20000; i++) {
        var now = new Date(base += oneDay)
        date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'))
        data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]))
        data1.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]))
      }

      let option = {
        title: {
          text: '倾角4（桥台）' + '监测点倾角变化曲线图',
          x: 'center',
          align: 'right'
        },
        grid: {
          left: '70px',
          right: '80px',
          bottom: '80px'
        },
        legend: {
          data: ['X', 'Y', 'XY'],
          x: 'right',
          y: 'top',
          orient: 'vertical',
          padding: [55, 15, 0, 0]
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',

            label: {
              backgroundColor: '#505765'
            }
          },
          formatter: function (params, ticket, callback) {
            var contentArr = []
            for (var i = 0; i < params.length; i++) {
              var data = params[i]
              if (i === 0) {
                contentArr.push(data.name)
              }
              contentArr.push(data.marker + data.seriesName + '角度值：' + data.value + '°')
            }
            return contentArr.join('<br/>')
          }
        },
        dataZoom: [{
          show: true,
          realtime: true,
          handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
          handleSize: '80%',
          handleStyle: {
            color: '#fff',
            shadowBlur: 3,
            shadowColor: 'rgba(0, 0, 0, 0.6)',
            shadowOffsetX: 2,
            shadowOffsetY: 2
          }
        },
        {
          type: 'inside',
          realtime: true
        }
        ],
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine: {
            onZero: false
          },
          data: date
        },
        yAxis: {
          name: '角度值(°)',
          axisLine: { // y轴
            show: true
          },
          type: 'value',
          boundaryGap: [0, '100%']
        },
        series: [{
          markLine: {
            lineStyle: { // 警戒线的样式  ，虚实  颜色
              type: 'dash',
              color: '#FA3934',
            },
            symbol: ['circle', 'arrow'], // 表示箭头从左向右
            label: {
              position: 'start' // 将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
            },
            data: [{
              label: {
                formatter: '1级'
              },
              silent: false, // 鼠标悬停事件  true没有，false有
              yAxis: 80 // 警戒线的标注值，可以有多个yAxis,多条警示线   或者采用   {type : 'average', name: '平均值'}，type值有  max  min  average，分为最大，最小，平均值
            }, {
              label: {
                formatter: '2级'
              },
              silent: false, // 鼠标悬停事件  true没有，false有
              yAxis: 120 // 警戒线的标注值，可以有多个yAxis,多条警示线   或者采用   {type : 'average', name: '平均值'}，type值有  max  min  average，分为最大，最小，平均值
            }]
          },
          name: 'X',
          type: 'line',
          smooth: true,
          symbol: 'none',
          sampling: 'average',
          itemStyle: {
            color: 'rgb(194, 53, 49)'
          },
          data: data
        },
        {
          name: 'Y',
          type: 'line',
          smooth: true,
          symbol: 'none',
          sampling: 'average',
          itemStyle: {
            color: 'rgb(47, 69, 84)'
          },

          data: data1
        },
        {
          name: 'XY',
          type: 'line',
          smooth: true,
          symbol: 'none',
          sampling: 'average',
          itemStyle: {
            color: 'rgb(97, 160, 168)'
          },
          data: data1
        }
        ]
      }
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById(id))
      myChart.setOption(option)
    }
  },
  mounted () {
    this.getLine1('line1')
  }
}
</script>

<style scoped="scoped" lang="less">
  @borderColors: #28324f;

  .s-btn {
    padding: 15px 20px;
  }

  .el-row {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .grid-content {
    background-color: #FFFFFF;
    border: 1px solid @borderColors;
    height: 816px;
    box-sizing: border-box;
  }

  .s-detail-box {
    padding: 2px;
    margin-bottom: 10px;
    border: 1px solid @borderColors;

    /deep/ .el-collapse-item__header {
      border-bottom: 1px solid #ebeef5;
      border-top: 1px solid #ebeef5;
      font-size: 16px;
      font-weight: bold;
    }

    .scroll-box {
      height: 221px;
      overflow-y: auto;
      overflow-x: hidden;

    }

    ul li {
      font-size: 13px;
      line-height: 20px;

      span:first-child {
        font-weight: bold;
      }
    }

  }

  .page-time {
    .s-time {
      width: 180px;
      margin-right: 15px;
      margin-bottom: 20px;
    }
  }

  .line-box {
    border: 1px solid @borderColors;
    height: 400px;
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 15px;
    padding: 15px;
  }

  .s-pic {
    .el-col {
      margin-right: 15px;
      margin-bottom: 15px;
    }

    .image {
      width: 100%;
      height: 145px;

    }

    .pic-bottom {
      padding: 14px;
      text-align: center;
    }
  }
</style>
